<template>
  <div class="main-content">
    <el-header>
      <span class="op-left">
      <label>产品型号：</label>
      <el-select v-model="defaultProduct" class="el-select el-select-group">
        <el-option v-for="(op, value) in productList" :key="value" :label="op.text" :value="op.value"></el-option>
      </el-select>

      <el-button class="el-button--primary" @click="queryTestList">获取用例</el-button>
        <label>测试设备：</label>
      <el-select v-model="defaultDevice" class="el-select el-select-group">
        <el-option v-for="(op, value) in deviceList" :key="value" :label="op.text" :value="op.value"></el-option>
      </el-select>

        </span>
      <el-button class="el-button--primary" @click="connectDevice">连接</el-button>
      <el-button class="el-button--info" @click="disconnectDevice">断开</el-button>
      <el-button class="el-button--primary add-btn" @click="testStart" >开始测试</el-button>
      <el-button class="el-button--info add-btn" @click="testStop">结束测试</el-button>
    </el-header>
    <el-table :data="testItemList" stripe border>
      <el-table-column prop="id" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="用例名称" align="center"></el-table-column>
      <el-table-column prop="model" label="产品型号" align="center"></el-table-column>
      <el-table-column prop="content" label="测试命令" align="center"></el-table-column>
      <el-table-column prop="manual" label="是否人工判断" :formatter="formatBoolean" align="center"></el-table-column>
      <el-table-column prop="step" label="测试步骤" align="center"></el-table-column>
      <el-table-column prop="preResult" label="预期结果" align="center"></el-table-column>

      <el-table-column prop="realResult" label="实际结果(人工填写)" hidden>
        <template v-slot:default="scope">
          <el-input class="el-input--small" style="width:auto" placeholder="结果数据" v-if="scope.row.manual" v-model="scope.row.realResult"></el-input>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template v-slot:default="scope">
          <el-button @click="testIt(scope.row)" v-if="scope.row.manual === false">自动测试</el-button>
          <el-button @click="testManualStart(scope.row)" v-if="scope.row.manual">人工测试</el-button>
          <el-button @click="testManualDone(scope.row)" v-if="scope.row.manual">测试结果提交</el-button>
          <label>{{ scope.row.opResult }}</label>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from "vue";
import {UseUrl} from "~/utils/config";

export default {
  name: "testItemManager",
  data() {
    return {
      defaultProduct:"frozen",
      defaultDevice:"",
      productList: [
        {text:"frozen", value:"frozen"},
        {text:"mt1", value:"mt1"}
      ],
      deviceList:[
        {text:"测试设备1", value:"测试设备1"},
        {text:"测试设备2", value:"测试设备2"},
        {text:"测试设备3", value:"测试设备3"},
      ],
      testItemList: [
      ],
      deviceConnectStyle: [
        {
          name: "测试设备1", connect: {
            connStyle: "http",
            addr: "192.168.31.147",
            port: 7777
          }
        },
        {
          name: "测试设备2", connect: {
            connStyle: "串口",
            addr: "/dev/ttyS1",
            port: 0
          }
        }
      ],
      result:{
        code:0,
        message:""
      },
      testContent: "",
      testUser:"jmd",
      testStartId:"",
      deviceTestList: [
        {
          currTestId:"",
          realResult:"",
          opResult:""
        }
      ]
    }
  },
  methods: {
    formatBoolean: function(row, column, cellValue) {
      var ret = ''
      if (cellValue) {
        ret = "是"
      } else {
        ret = "否"
      }
      return ret
    },
    connectDevice: function() {
      var that = this;
      this.result = "连接中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });

      params['connectStyle'] = curConnect.connStyle;
      params['addr'] = curConnect.addr;
      params['port'] = curConnect.port;
      console.log(params);
      Vue.axios.post(UseUrl + "/autotest/device/connect", JSON.stringify(params),
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.result = response.data;
        if (that.result.message === "exist")
        {
          that.connStatus = "connect:"+"success";
        }
        else {
          that.connStatus = "connect:" + that.result.message;
        }
        that.$message({
          "type":"info",
          "message":that.result
        })
      }).catch((error => {
        console.log(error);
        that.$message({
          "type":"error",
          "message":error
        })
      }))
    },
    disconnectDevice: function() {
      var that = this;
      this.result = "断开连接中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });

      params['connectStyle'] = curConnect.connStyle;
      params['addr'] = curConnect.addr;
      params['port'] = curConnect.port;
      console.log(params);
      Vue.axios.post(UseUrl + "/autotest/device/disconnect", JSON.stringify(params),
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.result = response.data;
        that.connStatus = "disconnect:" + that.result.message;
        that.$message({
          "type":"info",
          "message":that.result
        })
      }).catch((error => {
        console.log(error);
        this.result = error;
        that.$message({
          "type":"error",
          "message":error
        })
      }))
    },
    queryTestList: function() {
      var that = this;
      this.result = "请求中...";
      Vue.axios.get(UseUrl + "/autotest/get/"+ this.defaultProduct,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        // console.log(response.data);
        that.testResult = "queryList: " + response.data.message;
        if (response.data.code === 0) {
          that.testItemList = response.data.Result.items;
        }
      }).catch((error => {
        // console.log(error);
        this.testResult = error;
      }))
    },
    testStart: function() {

      var that = this;
      this.result = "请求中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });

      params['connectStyle'] = curConnect.connStyle;
      params['addr'] = curConnect.addr;
      params['port'] = curConnect.port;
      var testTarget = {};
      testTarget['connectStyle'] = curConnect.connStyle;
      testTarget['addr'] = curConnect.addr;
      testTarget['port'] = curConnect.port;
      params['testTarget'] = testTarget;
      params['testUser'] = this.testUser;
      params['model'] = this.defaultProduct;
      params['deviceId'] = curConnect.addr;
      console.log(params);
      Vue.axios.post(UseUrl + "/autotest/start", JSON.stringify(params),
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.testResult = "startTest:" + response.data.message;
        if (response.data.code === 0) {
          that.testStartId = response.data.result.id;
        }
        that.$message({
          "type":"info",
          "message":that.testResult
        })
      }).catch((error => {
        console.log(error);
        that.$message({
          "type":"error",
          "message":error
        })
      }))
    },

    testStop: function() {
      if (this.testUser.length === 0)
      {
        this.testResult = "测试者不可为空";
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });
      var testTarget = {};
      testTarget['connectStyle'] = curConnect.connStyle;
      testTarget['addr'] = curConnect.addr;
      testTarget['port'] = curConnect.port;
      params['id'] = this.testStartId;
      params['testTarget'] = testTarget;
      params['testUser'] = this.testUser;
      params['model'] = this.defaultProduct;
      params['deviceId'] = curConnect.addr;
      var str = JSON.stringify(params);
      this.testStartId = "";
      // console.log(str);
      Vue.axios.post(UseUrl + "/autotest/stop", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.testResult = "stopTest: " + response.data.message;
        this.$message({
          type:"info",
          message:that.testResult
        })
      }).catch((error => {
        console.log(error);
        this.$message({
          type:"error",
          message:error
        })
      }))
    },
    testIt: function(row) {
      if (this.testStartId === "") {
        this.$message.error("请先点击开始测试");
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });

      var testTarget = {};
      testTarget['connectStyle'] = curConnect.connStyle;
      testTarget['addr'] = curConnect.addr;
      testTarget['port'] = curConnect.port;
      params['testTarget'] = testTarget;
      params['id'] = ""; // 不需要，后台生成
      params['testId'] = row.id;
      params['projectId'] = this.testStartId;
      params['name'] = row.name;
      params['result'] = false;
      params['content'] = row.content;
      params['preResult'] = row.preResult;
      params['timeStart'] = 12; // 时间 不需要
      params['timeEnd'] = 12;// 时间 不需要
      var str = JSON.stringify(params);
      console.log(str);
      Vue.axios.post(UseUrl + "/autotest/test", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        this.$message.info(response.data.message);
      }).catch((error => {
        console.log(error);
        this.$message.error(error)
      }))
    },
    testManualStart: function(row) {
      if (this.testStartId === "") {
        this.$message.warning("请先点击开始测试");
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });

      var testTarget = {};
      testTarget['connectStyle'] = curConnect.connStyle;
      testTarget['addr'] = curConnect.addr;
      testTarget['port'] = curConnect.port;
      params['testTarget'] = testTarget;
      params['id'] = ""; // 不需要，后台生成
      params['testId'] = row.id;
      params['projectId'] = this.testStartId;
      params['name'] = row.name;
      params['result'] = false;
      params['content'] = row.content;
      params['preResult'] = row.preResult;
      params['timeStart'] = 12; // 时间 不需要
      params['timeEnd'] = 12;// 时间 不需要
      var str = JSON.stringify(params);
      // console.log(str);

      Vue.axios.post(UseUrl + "/autotest/test/manual/start", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        if (response.data.code === 0)
        {
          var currId = response.data.result.id;
          row.currTestId = currId;
          console.log("current id : ", currId);
        }
        that.$message({
          "type":response.data.code === 0 ? "info" : "error",
          "message":response.data.message
        })
      }).catch((error => {
        console.log(error);
        that.$message({
          "type": "error",
          "message": error
        })
      }))
    },
    testManualDone: function(row) {
      if (this.testStartId === "") {
        this.$message({
          "type":"error",
          "message":"请先点击开始测试"
        })
        return;
      }
      if (row.realResult === undefined || row.realResult.length === 0)
      {
        this.$message({
          "type":"error",
          "message":"请输入测试结果"
        })
        return;
      }
      // 是否有当前测试 id  的判断
      if (row.currTestId === undefined || row.currTestId.length === 0)
      {
        this.$message({
          "type":"error",
          "message":"还未开始测试此项，请先点击测试"
        })
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var curConnect;
      this.deviceConnectStyle.forEach((item, index, array) => {
        if (this.defaultDevice === item["name"]) {
          curConnect = item["connect"];
        }
      });

      var testTarget = {};
      testTarget['connectStyle'] = curConnect.connStyle;
      testTarget['addr'] = curConnect.addr;
      testTarget['port'] = curConnect.port;
      params['testTarget'] = testTarget;
      params['id'] = row.currTestId; // 上一条命令的返回
      params['testId'] = row.id;
      params['projectId'] = this.testStartId;
      params['name'] = row.name;
      params['result'] = row.realResult === row.preResult;
      params['content'] = row.realResult;
      params['preResult'] = row.preResult;
      params['timeStart'] = 12; // 时间 不需要
      params['timeEnd'] = 12;// 时间 不需要
      var str = JSON.stringify(params);
      // console.log(str);

      Vue.axios.post(UseUrl + "/autotest/test/manual/done", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.testResult = "testItemManual: " + response.data.message;
        that.$message({
          "type": response.data.code === 0 ? "info" : "error",
          "message": response.data.message
        })
      }).catch((error => {
        console.log(error);
        that.$message({
          "type": "error",
          "message": error
        })
      }))
    }
  }
}
</script>

<style scoped>
.main-content {
  padding: 10px;
}
.op-left {
  float: left;
}

</style>